<html>

<head>
    <title>Index</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="./js/csrf.js"></script>
    <link rel="stylesheet" href="./css/login.css" />
</head>

<body>
    <div class="index-header">
        <div class="index-header-inner">
            <div class="container">
                    <span><a href="index.html" class="icon" style="text-decoration: none;">SHAKESPEARE</a></span>
                <ul class="nav-link-group">
                    <li>
                        <a href="find.html">PROJECT
                            <br>学习项目</a>
                    </li>
                    <li>
                        <a href="guide.html">GUIDE
                            <br>医院导览</a>
                    </li>
                    <li>
                        <a href="mytest.html">TEST
                            <br>在线测试</a>
                    </li>
                    <li>
                        <a href="#">CONTACT
                            <br>联系我们</a>
                    </li>
                </ul>
                <div class="login-block">
                    <a href="#">登录</a>
                    &nbsp;&nbsp;
                    <a href="./register.html" v-if="user_id === null || user_id === '' || user_id === undefined">
                        注册</a>
                </div>

                <div class="pic2">
                    <div class="circle">
                        <img class="img-1" src="img/zhuazhua.png" />
                    </div>
                </div>

                <div class="p-header-picture">
                    <p style="color:#F5F5F5">SHAKESPEAR
                        <br>宠物医院</p>
                </div>
                <div class="p-header">
                    <p style="color:#F5F5F5">宠物医院职业学习平台
                        <br>宠物常见疾病职诊疗、评测、职能一站式学习</p>
                </div>
            </div>
        </div>
    </div>

    <div class="login-left">
        <div class="pic1">
            <img src="img/zhuazhua.png" />
        </div>
        <div class="p1_header">
            <p>SHAKESPEAR
                <br>宠物医院</p>
        </div>

        <div class="p2_header">
            <p>Welcome back！
                <br>Please login to your acount!</p>
        </div>
        <form action="#" name="f" method="post" id="login">
            <div class="input_outer">
                <span class="u_user"></span>
                <input name="logname" class="text" style="color: rgb(0, 0, 0, 0.6);" type="text" placeholder="请输入账户" v-model="email">
            </div>
            <div class="input_outer">
                <span class="us_uer"></span>
                <input name="logpass" class="text" style="color: rgb(0, 0, 0, 0.6); position:absolute; z-index:100;" value="" type="password"
                    placeholder="请输入密码" v-model="password">
            </div>

            <!-- <div class="confirm-left">
                <p>
                    <input type="checkbox" name="" value="" /> Remember me</p>
            </div>
            <div class="confirm-right">
                <a href="/index.html" class="address">Forget password?</a>
            </div> -->

            <div class="button-left">
                <div class="mb2">
                    <a class="act-but submit" href="javascript:;" style="color: #FFFFFF" v-on:click="doLogin">登录</a>
                </div>
            </div>

            <div class="button-right">
                <div class="mb2">
                    <a class="act-but1 submit1" href="javascript:;" style="color:#B5B5B5">注册</a>
                </div>
            </div>

        </form>
    </div>


    <div class="login-right">
        <div class="p-header">
            <p>给伴侣动物一份
                <br>生命的信赖和尊重</p>
            The needs of the patient come first
        </div>
        <div class="p-body">
            <p style="color: #919191">
                SHAKESPEARE宠物医院追求"The needs of the patient come first"(病人的需求第一)的价值观，倾力追求为伴侣动物 创造一个“幽静的环境+人性光辉+良好沟通”的医疗和康复环境，并在此基础上建构顺应性。我们相信这是一种超越认可度，满意度
                和忠诚度的追求，在宠颐生的诊疗机构里，重要的不是服务者承诺了什么，而是被服务者感知到了什么。您的宝贝和您的每一点滴 席位感受，我们都努力照料，给您带来健康的同时让您喝宝贝感知到幸福与愉悦。
            </p>
        </div>
    </div>




    <div class="paragraph bg-grey">
        <div class="container">
            <div class="p-header">
                <p>给伴侣动物一份
                    <br>生命的信赖和尊重</p>
                The needs of the patient come first
            </div>
            <div class="p-body-divide-left">
                <p>
                    SHAKESPEARE宠物医院追求"The needs of the patient come first"(病人的需求第一)的价值观，倾力追求为伴侣动物 创造一个“幽静的环境+人性光辉+良好沟通”的医疗和康复环境，并在此基础上建构顺应性。我们相信这是一种超越认可度，满意度
                    和忠诚度的追求，在宠颐生的诊疗机构里，重要的不是服务者承诺了什么，而是被服务者感知到了什么。您的宝贝和您的每一点滴 席位感受，我们都努力照料，给您带来健康的同时让您喝宝贝感知到幸福与愉悦。
                </p>
            </div>
            <div class="p-body-divide-right">
                <p>
                    We believe this is a pursuit that goes beyond recognition, satisfaction and loyalty. What's important is not what the service
                    provider promises, but what the service provider perceives in the clinic. Your baby and every bit of
                    your subtle feelings, we all work hard to bring you health while allowing you and your baby to feel happy
                    and happy.
                </p>
            </div>
            <div class="p-body">
                <button class="btn">阅读更多</button>
            </div>
        </div>
    </div>
    <div class="paragraph">
        <div class="container">
            <div class="p-header">
                <p>SHAKESPEARE
                    <br>专家团队</p>
                The needs of the patient come first
            </div>
            <ul id="carousel">
                <li>
                    <div class="p-three">
                        <div class="photo">
                            <img src="./img/head.png" />
                        </div>
                        <p>
                            2005年9月考入中国农业大学动物医学院攻读动物医学本科学位，直接保送临床兽医学硕博连读。
                        </p>
                        <div class="name-title">
                            <h4>陈文波1</h4>
                            <h6>华东兽医派</h6>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="p-three">
                        <div class="photo">
                            <img src="./img/head.png" />
                        </div>
                        <p>
                            2005年9月考入中国农业大学动物医学院攻读动物医学本科学位，直接保送临床兽医学硕博连读。
                        </p>
                        <div class="name-title">
                            <h4>陈文波2</h4>
                            <h6>华东兽医派</h6>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="p-three">
                        <div class="photo">
                            <img src="./img/head.png" />
                        </div>
                        <p>
                            2005年9月考入中国农业大学动物医学院攻读动物医学本科学位，直接保送临床兽医学硕博连读。
                        </p>
                        <div class="name-title">
                            <h4>陈文波3</h4>
                            <h6>华东兽医派</h6>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="p-three">
                        <div class="photo">
                            <img src="./img/head.png" />
                        </div>
                        <p>
                            2005年9月考入中国农业大学动物医学院攻读动物医学本科学位，直接保送临床兽医学硕博连读。
                        </p>
                        <div class="name-title">
                            <h4>陈文波4</h4>
                            <h6>华东兽医派</h6>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="tail">
        <div class="tail_left">
            <div class="tail_left_l">
                <div class="circle_1"></div>
                <div class="text_1">
                    <p>SHAKESPEAR</p>
                </div>
            </div>

            <div class="tail_left_r">
                <div class="text_2">
                    <p>StraBe 12
                        <br>12345 Irgendwo,Deutschland
                        <br>
                        <br>hallo@website.de</p>
                </div>
            </div>
        </div>

        <div class="tail_right">
            <div class="photo1">
                <img src="./img/tail1.png" />
            </div>
            <div class="photo2">
                <img src="./img/tail2.png" />
            </div>
            <div class="photo3">
                <img src="./img/tail3.png" />
            </div>

            <div class="text_3">
                <p>@2016 Shasta.Slle Rechte vorbehalten</p>

            </div>
        </div>
        <script src="./js/login.js"></script>
        <script>
            var p = 1;
            var p0 = 4;
            $('#carousel li:nth-child(4)').hide();
            var carousel = document.getElementById('carousel');
            setInterval(function () {
                $('#carousel').fadeToggle('slow');
                var liout = carousel.firstElementChild;
                carousel.removeChild(liout);
                carousel.appendChild(liout);
                $('#carousel li:last').hide();
                $('#carousel li:nth-child(3)').show();
                $('#carousel').fadeToggle('slow');
            }, 5000);
        </script>
</body>

</html>